<template>
  <v-app>
    <v-navigation-drawer permanent rail :railWidth="70" color="#211052">
      <v-list-item prepend-avatar="favicon.ico" :minHeight="70" class="avatar-icon"></v-list-item>
      <v-divider></v-divider>
      <v-list density="compact" nav>
        <v-list-item prepend-icon="mdi-message-processing" value="Text" @click="switchToTextMode" :minHeight="50"></v-list-item>
        <v-list-item prepend-icon="mdi-content-copy" value="File" @click="switchToFileMode" :minHeight="50"></v-list-item>
      </v-list>
      <template #append>
        <div class="version_info">v{{ version }}</div>
      </template>
    </v-navigation-drawer>
    <v-main>
      <TextQrCode v-if="widgetMode == 0"></TextQrCode>
      <FileQrCode v-else></FileQrCode>
    </v-main>
  </v-app>
</template>

<script>
import TextQrCode from '@/widgets/TextQrCode.vue';
import FileQrCode from '@/widgets/FileQrCode.vue';
import packageCfg from '../package.json';
export default {
  name: 'App',
  components: { TextQrCode, FileQrCode },
  data() {
    return {
      widgetMode: 0,
      version: packageCfg.version,
    };
  },
  methods: {
    switchToTextMode() {
      this.widgetMode = 0;
    },
    switchToFileMode() {
      this.widgetMode = 1;
    },
  }
}
</script>

<style>
html{
  overflow: hidden;
}
.v-main {
  padding-left: calc(var(--v-layout-left) + 20px);
  padding-right: calc(var(--v-layout-right) + 20px);
  padding-top: calc(var(--v-layout-top) + 20px);
  padding-bottom: calc(var(--v-layout-bottom) + 20px);
  height: calc(100% + 0px);
  overflow: hidden;
}
.v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) .v-list-item .v-avatar {
    --v-avatar-height: 36px;
}
.v-list-item__prepend > .v-badge .v-icon, .v-list-item__prepend > .v-icon, .v-list-item__append > .v-badge .v-icon, .v-list-item__append > .v-icon {
    font-size: 30px;
    width: 36px;
    height: 36px;
}
.v-btn--size-default {
    --v-btn-size: 1rem !important;
}
</style>
<style scoped>
.version_info{
  font-size: 0.8rem; 
  opacity: 0.5; 
  font-weight: lighter; 
  text-align: center; 
  margin-bottom: 5px;
}
</style>
